<template>
    <div class="filter_drawer">
        <div class="drawer_header">
            <div>筛选环境</div>
            <img src="@/assets/home/del-default.png" style="width: 16px;height: 16px;cursor: pointer;"
                @click="state.filterDrawer.show = false" alt="">
        </div>
        <div class="drawer_body">
            <el-scrollbar height="100%">
                <el-form :model="state.filterCondition2" label-width="auto" style="max-width: 600px">
                    <el-form-item v-for="item in filters" :key="item.value" :label="item.label">
                        <el-select v-model="state.filterCondition2[item.value]" :multiple="item.multiple" collapse-tags
                            max-collapse-tags="2" placeholder="请选择" clearable>
                            <el-option v-for="item2 in item.options" :key="item2.value" :label="item2.label"
                                :value="item2.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="创建时间">
                        <el-date-picker v-model="state.filterCondition2.creat_time" type="daterange" range-separator="-"
                            start-placeholder="开始时间" end-placeholder="结束时间" :size="size" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                    </el-form-item>
                </el-form>
            </el-scrollbar>
        </div>
        <div class="drawer_footer">
            <app-button style="margin-right: 16px;" @click="clickReset()">重置</app-button>
            <app-button class="app-button-ptn" @click="clickSubmit()">确定</app-button>
        </div>
    </div>
</template>

<script setup>
const { store, state } = inject('storejs')

const filters = ref([
    {
        value: 'platform_ids',
        label: '账号平台',
        multiple: true,
        options: state.map.bc_types
    }, {
        value: 'operating_system',
        label: '操作系统',
        multiple: false,
        options: state.map.operate
    }, {
        value: 'browser',
        label: '浏览器',
        multiple: false,
        options: [
            {
                value: 'ChroBrowser',
                label: 'ChroBrowser'
            },{
                value: 'FireBrowser',
                label: 'FireBrowser'
            },
        ]
    }, {
        value: 'group_ids',
        label: '环境分组',
        multiple: true,
        options: state.map.groupList
    },
    // {
    //     value: 'select',
    //     label: '授权成员',
    //     multiple: true,
    //     options: []
    // }, 
    {
        value: 'proxy_types',
        label: '代理类型',
        multiple: true,
        options: state.map.procyType
    }, {
        value: 'facilitators',
        label: 'API服务商',
        multiple: true,
        options: state.map.facilitatorList
    }, {
        value: 'creat_source',
        label: '环境来源',
        multiple: false,
        options: [
            {
                value: 'create',
                label: '创建'
            },{
                value: 'transfer',
                label: '转移'
            },
        ]
    },
    // {
    //     value: 'creat_time',
    //     label: '创建者',
    //     multiple: true,
    //     options: []
    // }
])

const clickSubmit = () => {
    state.filterDrawer.show = false
    store.getEnvironmentList()
}

const clickReset = () => {
    state.filterCondition2 = {}
    state.filterDrawer.show = false
    store.getEnvironmentList()
}
</script>

<style lang="scss" scoped>
.filter_drawer {
    position: absolute;
    height: 100%;
    width: 460px;
    background: #fff;
    z-index: 100;
    top: 0;
    right: 0;
    box-shadow: -6px 0 16px -8px #00000014, -9px 0 28px 0 #0000000d, -12px 0 48px 16px #00000008;
    display: flex;
    flex-direction: column;
}

.drawer_header {
    width: 100%;
    height: 55px;
    border-bottom: 1px solid #f0f0f0;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #000000d9;
    font-size: 16px;
}

.drawer_body {
    flex: 1;
    padding: 24px;
}

.drawer_footer {
    width: 100%;
    height: 55px;
    border-top: 1px solid #f0f0f0;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: flex-end;

}
</style>